import React from 'react'
import style from './style.employ-management-update'
import { error, info, success, Button, InputList, Input, DateSelect, Link, TitleBar } from '../../ui-components'
import { connect } from 'react-redux'
import util from '../../util'
import { getTypeName } from './EmployManagement'
import moment from 'moment';

export default
@connect(({ app, user }) => ({ user,app }))
class EmployManagementUpdate extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      notifyUsers: [],
      userId: props.params.userId,
      statusType: props.params.statusType,
      updateType: '',
      description:''
    }
  }

  handleSubmit() {
    const { notifyUsers, ...others } = this.state
    const { updateType, updateDate, statusType } = others
    const typeName = getTypeName(statusType)
    if (util.isNull(updateDate) || util.isNull(updateType)) {
      return error(`${typeName}日期或${typeName}类型 不能为空!`)
    }
    info('提交中..', true)
    this.props.updateEmployManagement(
      {
        ...others,
        toNotifyUserIds: notifyUsers.map(user => user.userId)
      },
      () => {
        success('转正处理成功！')
        this.props.router.push(`/hr/reorg/employ-managements/${statusType}`)
      }
    )
  }

  componentWillReceiveProps(props) {
    if (props.params.userId != this.props.params.userId) {
      this.fetchUserCoreProfile(props)
    }
  }

  componentWillUnmount() {
    this.props.resetUser()
  }

  fetchUserCoreProfile(props) {
    props = props || this.props
    this.props.fetchUserCoreProfile(props.params.userId)
  }
  
  componentDidMount() {
    this.fetchUserCoreProfile()
  }

  updateField(value, name) {
    this.setState({
      ...this.state,
      [name]: value
    })
  }

  render() {
    const { statusType } = this.props.params
    const typeName = getTypeName(statusType)
    const { coreProfile } = this.props.user
    return (
      <div className={style.root}>
        <TitleBar
          back
          label={`办理${typeName}`}
        />
        <div className={style.list}>
          <div className={style.user}>
            <label>{typeName}对象</label>
            <div className={style['avatar']}>
              <Link 
                noHover
                src={coreProfile.avatarUrl}
                srcIcon="avatar"
                width="120"
              />
              <span style={{color : '#fff', marginLeft: '0px' }}>{ coreProfile.fullName || '' }</span>
            </div>
          </div>
          <div>
            <div>
              <Input tip={ statusType == 1? '如：提前转正、正常转正、延迟转正等（选填）': '如：解雇、主动请辞、合同期结束等（选填）' } label={typeName+'类型'} value={this.state.updateType} onChange={e => this.updateField(e.target.value, 'updateType')}/>
            </div>
          </div>
          <div>
            <div>
              <DateSelect
                time={this.state.updateDate && moment(+this.state.updateDate).format('YYYY-MM-DD')}
                label={typeName+'日期'}
                onChange={v => this.updateField(v, 'updateDate')}
              />
            </div>
          </div>
          <div>
            <div>
              <Input label={'说明'} multi value={this.state.description} onChange={e => this.updateField(e.target.value, 'description')}/>
            </div>
          </div>
          <div className={style['list-field']}>
            <InputList 
              label={'通知以下人员'}
              keep={false}
              onSelect={user => this.setState({
                notifyUsers: [
                  ...this.state.notifyUsers,
                  user
                ]
              })}
              excludeList={this.state.notifyUsers}
              fetch={this.props.fetchAtList}
              clear={this.props.clearAtList}
              list={this.props.app.atList}
            />
            <div style={{width: '100%'}}>
              {
                this.state.notifyUsers? (
                  <ul className={style['notify-users']}>
                    {
                      this.state.notifyUsers.map((v, i) => (
                        <li key={i}>
                          <span>{ v.fullName }</span>
                          <Link icon="close" onClick={() => this.setState({
                            notifyUsers: this.state.notifyUsers.filter(user => user.userId != v.userId)
                          })}/>
                        </li>
                      ))
                    }
                  </ul>
                ): null
              }
            </div>
          </div>
          <Button style={{ marginLeft: '116px' }} label="提交" onClick={::this.handleSubmit}/>
        </div>
      </div>
    )
  }
}
